<template>
  <BodyCard>
    <el-container>
      <el-header>
        <head-item></head-item>
      </el-header>
      <el-main>

        <el-row class="mb-3" style="margin-bottom: 10px">
          <el-col :span="18" :offset="3">
            <el-input
                id="blogTitle"
                v-model="learnInfo.title"
                minlength="4"
                maxlength="50"
                placeholder="请输入文章标题"
                show-word-limit
                size="large"
                type="text">
            </el-input>
          </el-col>
        </el-row>

        <el-row :gutter="10" class="mb-3 text-start edit-padding" style="margin-bottom: 10px">
          <el-col :span="18" :offset="3">
            <MDEditor v-model="learnInfo.content" :text="learnInfo.content" @sendText="updateText"></MDEditor>
          </el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
          <el-col :span="18" :offset="3">
            <el-card class="box-card">
              <el-row style="margin-bottom: 10px">
                <el-col :span="5" :offset="3">
                  <el-form-item label="文章分类：" prop="tid">
                    <el-select v-model="learnInfo.ofCategory" placeholder="Select">
                      <el-option
                          v-for="item in types"
                          :key="item.id"
                          :label="item.category"
                          :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>


              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col :span="5" :offset="3">
                  <el-form-item label="原创|转载：">
                    <el-radio v-model="learnInfo.isOriginal" label="yes">原创</el-radio>
                    <el-radio v-model="learnInfo.isOriginal" label="no">转载</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row style="margin-bottom: 10px">
                <el-col :span="20" :offset="3">
                  <el-form-item label="文章封面：">
                    <uploadImage @uploadSuccess="addImage"></uploadImage>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="mb-3" style="margin-bottom: 10px">
                <el-col :span="18" :offset="3" class="description">
                  <el-form-item label="文章摘要：">
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入"
                        v-model="learnInfo.description">
                    </el-input>

                  </el-form-item>
                </el-col>
              </el-row>

              <el-row style="margin-bottom: 10px">
                <el-col :span="4" :offset="20">
                  <el-button @click="checkMD()" type="primary" >上传<el-icon class="el-icon--right"><Upload /></el-icon>
                  </el-button>
                </el-col>
              </el-row>
            </el-card>
          </el-col>

        </el-row>
      </el-main>
    </el-container>
    <foot-item></foot-item>
  </BodyCard>

</template>

<script>
import MDEditor from "@/components/MDEditor";
import HeadItem from "@/components/head-item";
import FootItem from "@/components/foot-item";
import BodyCard from "@/components/card/BodyCard";
import uploadImage from "@/components/uploadImage";
import {getRequest} from "../utils/api";
import {postRequest} from "../utils/api";
import {ElMessage} from "element-plus";


export default {
  name: "newBlog",
  components: {BodyCard, FootItem, HeadItem, MDEditor,uploadImage},
  data() {
    return {
      learnInfo: {
        title: '',
        description: '',
        content: '',
        isOriginal: 'yes',
        user: {},
        ofCategory: 1,
        hasImage: 0,
        images: "",
      },
      uploadImages: [],
      types: [],

      };
  },
  methods: {
    addImage(data){
      this.uploadImages.push(data)
      this.learnInfo.images = ""
      this.uploadImages.forEach(image=>{
        let string = JSON.stringify(image.url)
        let url = string.substring(1,string.length-1)

        if (this.learnInfo.images != "")
          this.learnInfo.images = this.learnInfo.images+";"+url
        else
          this.learnInfo.images = url
      })
      this.learnInfo.hasImage++
    },
    checkLogin() {
      let token = window.sessionStorage.getItem("token")
      if (token) {
        this.$router.push({name: 'newBlog'});
      } else {
        ElMessage.error({message: "请先登录，将自动跳转"});
        this.$router.replace('/login')
      }
    },
    checkMD() {

      if (this.learnInfo.title == '') {
        ElMessage.error({message: "标题不能為空！"})
        return
      }
      if (this.learnInfo.text == '') {
        ElMessage.error({message: "內容不能為空！"})
        return
      }
      if (this.learnInfo.description == '') {
        ElMessage.error({message: "摘要不能為空！"})
        return
      }

      this.learnInfo.user = JSON.parse(window.sessionStorage.getItem("user"))
      postRequest('/blog/upload', this.learnInfo).then(resp => {
        if (resp) {

          this.$router.replace('/')
        }
      })
    },
    updateText(text) {
      this.learnInfo.content = text
    },
    getTypes() {
      getRequest('/cates/inits').then(resp => {
        if (resp) {
          this.types = resp.data
        }
      })
    },
  },
  mounted() {
    this.getTypes()
    this.checkLogin()
  }
}
</script>

<style scoped lang="less">
.box-card {
  width: 100%;
}
/deep/.el-textarea__inner{
  border-color: #C0C4CC;
}
</style>